<template>
  <div>
    <v-title></v-title>
    <v-search></v-search>

    <!-- 下面的两个大盒子内容 -->
    <div class="bigbox clearfix">

      <!-- 左边 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="(item,index) in leftlist"
          :key="item.id"
          :title="item.catename"
          @click="changelist(index)"
        />
      </van-sidebar>

      <!-- 右边 -->
      <div class="right">
        <ul class="rightbox">
          <li v-for="item in rightlist" :key="item.id" @click="golist(item.id)"> 
            <img :src="item.img" alt="">
            <p>{{item.catename}}</p>
          </li>
        </ul>
      </div>


    </div>


  </div>
</template>


<script>
import { getcates } from "../request/app";
export default {
  data() {
    return {
      activeKey: 0,
      leftlist: [],
      rightlist: [],
    };
  },
  methods:{
    changelist(index){
       this.rightlist = this.leftlist[index].children;
    },
    golist(id){
      this.$router.push({
        path:"/list",
        query:{
          id
        }
      })
    }
  },
  mounted() {
    getcates().then((val) => {
      if (val.code != 200) {
        alert(val.msg);
        return;
      };
      this.leftlist = val.list;
      this.rightlist = this.leftlist[0].children;
    });
  },
};
</script>


<style scoped>
@import "../assets/css/items.css";
</style>